import React, { Component } from "react";
import {
  Container,
  Header,
  Navbar,
  Content,
  FlexboxGrid,
  Panel,
  Form,
  FormGroup,
  Button,
  Input,
  Schema,
  Alert,
} from "rsuite";

import CustomField from "../../components/form/customField";
import http from "../../components/http/http";
import rest from "../../assets/config/rest.json";

import LoginCss from "./login.module.css";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      loginForm: {
        loginId: "",
        password: "",
      },
      checkModel: this.checkModel(),
    };
    this.handleRoute = this.handleRoute.bind(this);
  }

  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }

  checkModel() {
    const { StringType } = Schema.Types;
    return Schema.Model({
      loginId: StringType().isRequired("required"),
      password: StringType().isRequired("required"),
    });
  }

  handleRoute() {
    const { loginFormRef } = this.refs;
    const { loginForm } = this.state;
    if (!loginFormRef.check()) {
      return;
    }
    this.setState({ loading: true });
    http
      .post(rest.login, {
        loginId: loginForm.loginId,
        password: window.btoa(loginForm.password),
      })
      .then((response) => {
        if (response.status === 200) {
          localStorage.setItem(
            rest.token,
            JSON.stringify({
              token: response.data.token,
              period: response.data.tokenPeriod,
            })
          );
          localStorage.setItem(rest.menu, JSON.stringify(response.data.menus));
          this.props.history.push("/");
        } else {
          Alert.error("请检查用户名和密码");
          this.setState({ loading: false });
        }
      })
      .catch((error) => {
        Alert.error("请检查用户名和密码");
        this.setState({ loading: false });
      });
  }

  render() {
    const { checkModel, loginForm, loading } = this.state;
    return (
      <Container style={{ height: "100%" }}>
        <Header>
          <Navbar appearance="inverse">
            <Navbar.Header>
              <p className={LoginCss.logo}>Iot Gateway Platform</p>
            </Navbar.Header>
          </Navbar>
        </Header>
        <Content style={{ background: "rgb(247, 247, 250)" }}>
          <FlexboxGrid justify="center">
            <FlexboxGrid.Item colspan={12}>
              <Panel
                className={LoginCss.loginPage}
                header={<h3>Iot 网关平台</h3>}
                bordered
              >
                <Form
                  fluid
                  ref="loginFormRef"
                  formValue={loginForm}
                  model={checkModel}
                  onChange={(formValue) => {
                    this.setState({ loginForm: formValue });
                  }}
                >
                  <CustomField
                    name="loginId"
                    label="登录名:"
                    accepter={Input}
                    placeholder="请输入登录名"
                    type="text"
                  />
                  <CustomField
                    name="password"
                    label="密码:"
                    accepter={Input}
                    placeholder="请输入密码"
                    type="password"
                  />
                  <FormGroup>
                    <Button
                      appearance="primary"
                      loading={loading}
                      onClick={this.handleRoute}
                    >
                      Sign in
                    </Button>
                  </FormGroup>
                </Form>
              </Panel>
            </FlexboxGrid.Item>
          </FlexboxGrid>
        </Content>
      </Container>
    );
  }
}

export default (props) => <Login {...props} key={props.location.pathname} />;
